<template>
    <el-table :data="answers" :border="true" :stripe="true" class="table">
        <el-table-column prop="name" label="姓名" min-width="150" />
        <el-table-column prop="time" label="交卷时间" min-width="150" />
        <el-table-column prop="status" label="状态" :formatter="statusFormatter" min-width="150" />
        <el-table-column prop="score" label="得分" min-width="150" />
        <el-table-column label="操作" fixed="right" min-width="80" :align="'center'">
            <template #default="scope">
                <el-button type="primary" size="small" @click="onShow(scope.row.id)" v-if="scope.row.status === 1">阅卷</el-button>
                <el-button type="success" size="small" @click="onShow(scope.row.id)" v-if="scope.row.status === 2 || scope.row.status === 3">查看</el-button>
            </template>
        </el-table-column>

        <!-- 空状态 -->
        <template #empty>
            <el-empty description="暂无数据，请刷新试试！" />
        </template>
    </el-table>
</template>

<script setup lang="ts">
import { h } from "vue";
import { ElTag } from "element-plus";
//父传子
interface Props {
    answers?: Record<string, any>;
}
withDefaults(defineProps<Props>(), {
    answers: () => ({}),
});

//状态[1未阅卷，2已通过，3未通过，4未考试]
const statusFormatter = (row: any, column: any) => {
    switch (row[column.property]) {
        case 1:
            return h(ElTag, { type: "primary", size: "small" }, () => "未阅卷");
        case 2:
            return h(ElTag, { type: "success", size: "small" }, () => "已通过");
        case 3:
            return h(ElTag, { type: "warning", size: "small" }, () => "未通过");
        case 4:
            return h(ElTag, { type: "danger", size: "small" }, () => "未考试");
    }
};

//使用defineEmits注册一个自定义事件
const emit = defineEmits(["on-show"]);

//查看
const onShow = (id: string) => emit("on-show", id);
</script>

<style lang="less" scoped>
.table {
    width: 100%;
}
</style>
